<template>
    <div class="bgf padt40 padb40" v-loading.fullscreen.lock="fullscreenLoading">
        <el-form :model="form" label-width="120px" :rules="rules">

            <el-form-item label="文章标题：" prop="title">
                <el-input v-model="form.title" placeholder="请输入60个字以内的文章标题" class="w460" />
            </el-form-item>

            <el-form-item label="文章排序：" prop="sort">
                <el-input v-model="form.sort" placeholder="请输入排序" class="w100" />
            </el-form-item>

            <el-form-item label=" ">
                <div class="editor">
                    <div ref="editor"></div>
                </div>
            </el-form-item>

            <el-form-item>
                <el-button class="w140" type="primary" @click="submit">确认提交</el-button>
            </el-form-item>

        </el-form>
    </div>
</template>
<script>
import E from "wangeditor"
export default {
    data() {
        return {
            loading: false,
            fullscreenLoading: false,
            form: {},
            rules: {
                title: [{ required: true, message: '请输入内容', trigger: 'blur' }],
                sort: [{ required: true, message: '请输入排序', trigger: 'blur' }],
            },
            editor: null,
        }
    },
    mounted() {
        let that = this;
        that.id = that.$route.params.id;

        that.$nextTick(() => {
            that.editor = new E(that.$refs.editor);
            that.editor.config.zIndex = 10
            that.editor.config.excludeMenus = [
                'video'
            ];
            that.editor.config.showLinkImg = false;
            that.editor.config.height = 400;
            that.editor.config.customUploadImg = function (resultFiles, insertImgFn) {
                let imgFile = resultFiles[0];
                // console.log(resultFiles);
                let pic = new FormData();
                pic.append('files', imgFile);

                that.$api.uploadList(pic).then(res => {
                    console.log(res);
                    if (res) {
                        insertImgFn(res.path)
                        // this.loading = false;
                    }
                })
            };
            that.editor.create()
        });

        let query = that.$route.query;
        if (query.articleId) {
            that.form = {
                type: that.$route.params.type,
                sort: query.sort,
                articleId: query.articleId,
                title: query.title,
            }
        } else {
            that.form = {
                type: that.$route.params.type,
            }
        }

        console.log(that.form, 'that.form')
        if (query.content) {
            that.$nextTick(() => {
                that.editor.txt.html(query.content);
            })
        }

    },
    methods: {

        submit() {
            let that = this;
            that.fullscreenLoading = true;
            console.log(this.form, 'this.form------');
            that.form.type=1;
            let html = that.editor.txt.html();

            console.log(that.form, html);
            if (that.form.articleId == null) {

               
                that.$api.insertarticle(that.form, { content: html }).then(res => {
                    that.fullscreenLoading = false;
                    console.log(res);
                    if (res) {
                        that.$message.success(res.message);
                        that.$router.go(-1)
                    }
                });
            } else {

                that.$api.updatearticle(that.form, {content:html }).then(res => {
                    that.fullscreenLoading = false;
                    console.log(res);
                    if (res) {
                        that.$message.success(res.message);
                        that.$router.go(-1)
                    }
                });


            }

        },
    }
}
</script>
<style lang="scss" scoped>
.editor {
    width: 795px;
}
</style>